<template>
  <div class="home">
    <van-overlay :show="showMenu" @click="showMenu = false" />
    <div class="home-top">
      <div class="home-top-wrap">
        <img src="../assets/img/home/home-logo.png" alt />
        <div
          class="pages"
          :class="{ active: showMenu }"
          @click="showMenu = !showMenu"
        ></div>
      </div>
      <transition name="van-slide-down">
        <div class="home-menu" v-show="showMenu">
          <a
            href="javascript:;"
            @click="
              skipRouter({ path: '/newsList', query: { newsCategory: 0 } })
            "
            class="home-menu-item van-hairline--bottom"
          >
            <span>新闻资讯</span>
            <img src="../assets/img/home/arrow.png" alt />
          </a>
          <a
            href="javascript:;"
            @click="
              skipRouter({ path: '/newsList', query: { newsCategory: 1 } })
            "
            class="home-menu-item van-hairline--bottom"
          >
            <span>协会动态</span>
            <img src="../assets/img/home/arrow.png" alt />
          </a>
          <a
            href="javascript:;"
            @click="
              skipRouter({ path: '/newsList', query: { newsCategory: 5 } })
            "
            class="home-menu-item van-hairline--bottom"
          >
            <span>行业公示</span>
            <img src="../assets/img/home/arrow.png" alt />
          </a>
          <a
            v-show="userInfo"
            href="javascript:;"
            @click="skipRouter({ path: '/my' })"
            class="home-menu-item"
          >
            <span>个人中心</span>
            <img src="../assets/img/home/arrow.png" alt />
          </a>
          <a
            v-show="userInfo"
            href="javascript:;"
            @click="skipRouter({ path: '/onStudy' })"
            class="home-menu-item"
          >
            <span>在线学习</span>
            <img src="../assets/img/home/arrow.png" alt />
          </a>
          <a
            v-show="!userInfo"
            href="javascript:;"
            @click="skipRouter({ path: '/login' })"
            class="home-menu-item"
          >
            <span>登陆</span>
            <img src="../assets/img/home/arrow.png" alt />
          </a>
          <a
            v-show="!userInfo"
            href="javascript:;"
            @click="skipRouter({ path: '/reg' })"
            class="home-menu-item"
          >
            <span>注册</span>
            <img src="../assets/img/home/arrow.png" alt />
          </a>
        </div>
      </transition>
    </div>
    <div class="home-search">
      <van-search
        v-model="searchValue"
        @search="onSearch"
        @cancel="onCancel"
        placeholder="请输入搜索关键词"
      />
    </div>
    <div class="home-wrap">
      <!--轮播图-->
      <div class="home-swiper">
        <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
          <van-swipe-item
            v-for="(item, index) in banners"
            :key="index"
            @click="handSwipe(item)"
          >
            <img :src="imgUrl + item.imgUrl" :alt="item.imgAlt" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!--五宫格-->
      <div class="home-grid">
        <a href="javascript:;" @click="applyVip()" class="home-grid-item">
          <div class="grid-img">
            <img src="../assets/img/home/vip-apply.png" alt />
          </div>
          <p>会员申请</p>
        </a>
        <a
          href="javascript:;"
          @click="skipRouter({ path: '/awardList', query: { awardType: 0 } })"
          class="home-grid-item"
        >
          <div class="grid-img">
            <img src="../assets/img/home/prize.png" alt />
          </div>
          <p>成果鉴定</p>
        </a>
        <a
          href="javascript:;"
          @click="skipRouter({ path: '/awardList', query: { awardType: 1 } })"
          class="home-grid-item"
        >
          <div class="grid-img">
            <img src="../assets/img/home/works.png" alt />
          </div>
          <p>作品申报</p>
        </a>
        <a
          href="javascript:;"
          @click="openWindow('http://kejijiangh5.cbda1984.com')"
          class="home-grid-item"
        >
          <div class="grid-img">
            <img src="../assets/img/home/credit.png" alt />
          </div>
          <p>科技奖</p>
        </a>
        <a
          href="javascript:;"
          @click="
            skipRouter({ path: '/activityConter', query: { activityType: 0 } })
          "
          class="home-grid-item"
        >
          <div class="grid-img">
            <img src="../assets/img/home/login-search.png" alt />
          </div>
          <p>协会活动</p>
        </a>
      </div>
      <!--热门活动-->
      <div class="home-activity">
        <div class="home-activity-title">
          <div>热门活动</div>
          <a
            href="javascript:;"
            @click="
              skipRouter({ path: '/activityConter', query: { activityType: 1 } })
            "
            >更多></a
          >
        </div>
        <div class="home-activity-recommend">
          <div class="img-list" v-if="hotActivity.length != 0">
            <a
              href="javascript:;"
              @click="
                skipRouter({
                  path: '/activtyDetails',
                  query: { activityId: item.activityId },
                })
              "
              v-show="index !== 2"
              v-for="(item, index) in hotActivity"
              :key="index"
              class="img-list-item"
            >
              <img
                v-if="
                  item.schedule == 1 || item.schedule == 2 || item.schedule == 3
                "
                class="img-icon"
                src="@/assets/img/baomingzhong.png"
                alt
              />
              <img
                v-if="item.schedule == 3"
                class="img-icon"
                src="@/assets/img/jinxingzhong.png"
                alt
              />
              <img
                v-if="item.schedule == 4"
                class="img-icon"
                src="@/assets/img/yijieshu.png"
                alt
              />
              <img :src="imgUrl + item.listImg" alt class="bg" />
              <p class="title">{{ item.title }}</p>
            </a>
          </div>
          <div v-else class="van-list__finished-text">暂无热门活动</div>
        </div>
      </div>
      <!--企业档案-->
      <div class="home-file">
        <div class="more-list">
          <a
            v-if="moreShow == 0"
            href="javascript:;"
            @click="skipRouter({ path: '/record' })"
            >更多></a
          >
          <a
            v-else
            href="javascript:;"
            @click="skipRouter({ path: '/personageRecord' })"
            >更多></a
          >
        </div>
        <van-tabs v-model="active" @click="tabClick" color="#0050A5" animated>
          <van-tab
            v-for="(tab, tabKey) in tabs"
            :key="tabKey"
            :title="tab.title"
            :title-style="{ fontSize: '0.43rem' }"
          >
            <div v-show="moreShow == 0">
              <div
                class="companyItem"
                v-for="(item, index) in companyRecordList"
                :key="index"
                @click="
                  skipRouter({
                    path: '/recordDetails',
                    query: { recordId: item.recordId },
                  })
                "
              >
                <div class="companyTitle">{{ item.recordName }}</div>
                <div class="companyWork">{{ item.workExperience }}</div>
                <div class="tag">
                  <!-- <van-tag type="danger" color="#ffe1e1" text-color="#ad0000" size="medium">推荐</van-tag> -->
                  <img src="@/assets/img/tuijian.png" alt />
                </div>
              </div>
            </div>

            <div v-show="moreShow == 1" style="margin-bottom: 20px">
              <a
                href="javascript:;"
                @click="
                  skipRouter({
                    path: '/preDetails',
                    query: { recordId: item.recordId },
                  })
                "
                class="home-file-item"
                v-for="(item, index) in personRecordList"
                :key="index"
              >
                <van-image
                  class="geren-img"
                  fit="cover"
                  :src="imgUrl + item.titleImage"
                />
                <div class="txt">
                  <div class="tit van-ellipsis">{{ item.recordName }}</div>
                  <div class="tit van-ellipsis-pro">{{ item.profession }}</div>
                  <div class="content van-multi-ellipsis--l3">
                    {{ item.workExperience }}
                  </div>
                </div>
              </a>
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <!-- <div class="home-more">
        <van-divider :style="{ color: '#0050A5', borderColor: '#BFBFBF', padding: '0 16px' }">查看更多</van-divider>
      </div>-->
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Home",
  computed: {
    ...mapGetters(["userInfo"]),
  },
  components: {},
  data() {
    return {
      imgUrl: config.imgUrl,
      active: 0,
      moreShow: 0,
      showMenu: false,
      searchValue: "",
      banners: [],
      hotActivity: [],
      tabs: [
        {
          title: "企业档案",
        },
        {
          title: "个人档案",
        },
      ],
      personRecordList: [],
      companyRecordList: [],
    };
  },
  methods: {
    handSwipe(item) {
      console.log(item);
      if (item.imgSrc) {
        window.open(item.imgSrc);
      }
    },
    onSearch(val) {
      this.skipRouter({ path: "/search", query: { searchText: val } });
    },
    onCancel() {
      this.searchValue = "";
    },
    skipRouter(routerObj) {
      this.$router.push(routerObj);
    },
    openWindow(url){
      window.open(url);
    },
    tabClick(index, title) {
      this.moreShow = index;
      this.$forceUpdate();
    },
    findbanner() {
      this.$request.post("/advertising/search", { category: 0 }).then((rsp) => {
        if (rsp.code === 200) {
          this.banners = JSON.parse(rsp.data[0].imgUrlList);
        } else {
          this.$toast.fail(rsp.content);
        }
      });
    },
    getHotActivity() {
      this.$request({
        url: "/activity/isTopActivity",
        method: "post",
        data: {},
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.hotActivity = rsp.data;
          console.log(this.hotActivity);
        } else {
          this.$toast.fail(rsp.content);
        }
      });
    },
    gatPersonRecord() {
      this.$request({
        url: "/activity/isTopRecordList",
        method: "post",
        data: { type: 0 },
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.personRecordList = rsp.data;
        } else {
          this.$toast.fail(rsp.content);
        }
      });
    },
    getCompanyRecord() {
      this.$request({
        url: "/activity/isTopRecordList",
        method: "post",
        data: { type: 1 },
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.companyRecordList = rsp.data;
        } else {
          this.$toast.fail(rsp.content);
        }
      });
    },
    applyVip() {
      if (!this.userInfo) {
        this.$router.push({ path: "/notice" });
        return;
      }
      this.$request
        .post("/vip/selectMyVip", {
          page: 1,
          pageSize: 10,
          userCode: this.userInfo.userCode,
        })
        .then((rsp) => {
          console.log(rsp);
          if (rsp.code === 200) {
            let vip = rsp.data.list[0];
            if (vip) {
              if (
                vip.status === "0" ||
                vip.status === "1" ||
                vip.status === "2"
              ) {
                this.$router.push({ path: "/vipAudit" });
              } else {
                this.$router.push({ path: "/vipAuthentication" });
              }
            } else {
              this.$router.push({ path: "/notice" });
            }
          } else {
            this.$message.error(rsp.data.content);
          }
        });
    },
  },
  mounted() {
    this.findbanner();
    this.getHotActivity();
    this.gatPersonRecord();
    this.getCompanyRecord();
  },
};
</script>
<style lang='scss'>
@import "../assets/css/base";
.home {
  width: 100%;
  background-color: #f7f7f7;
  .van-tabs__nav {
    background-color: #f7f7f7;
  }
  &-top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    &-wrap {
      width: 100%;
      padding: px2rem(20) px2rem(35) 0 px2rem(20);
      position: relative;
      z-index: 999;
      box-sizing: border-box;
      background-color: #fff;
      @include flex();
      & > img {
        // width:px2rem(481);
        // height:px2rem(62);
        width: px2rem(636);
        height: px2rem(82);
      }
      & > .pages {
        @include bgImg(
          px2rem(38),
          px2rem(29),
          "../assets/img/home/category.png"
        );
        &.active {
          @include bgImg(
            px2rem(38),
            px2rem(29),
            "../assets/img/home/close.png"
          );
        }
      }
    }
  }
  &-menu {
    position: absolute;
    top: px2rem(100);
    left: 0;
    width: 100%;
    background-color: #ffffff;
    z-index: 100;
    padding-top: px2rem(30);
    &-item {
      width: 100%;
      box-sizing: border-box;
      padding: 0 px2rem(30) 0 px2rem(40);
      position: relative;
      @include flex();
      height: px2rem(85);
      & > span {
        font-size: px2rem(28);
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
      }
      & > img {
        height: px2rem(26);
      }
      .img-icon {
        position: absolute;
        top: 0;
        left: 0;
        width: px2rem(76);
        height: px2rem(34);
      }
    }
  }

  .van-overlay {
    z-index: 20 !important;
  }
  &-wrap {
    width: px2rem(690);
    margin: 0 auto;
  }
  &-search {
    width: 100%;
    margin-top: px2rem(110);
  }
  &-swiper {
    width: 100%;
    border-radius: px2rem(5);
    margin-top: px2rem(10);
    .my-swipe {
      .van-swipe-item {
        width: px2rem(690) !important;

        img {
          width: px2rem(690);
          height: px2rem(370);
          border-radius: px2rem(5);
          display: block;
          object-fit: cover;
        }
      }
    }
  }
  &-grid {
    margin-top: px2rem(35);
    @include flex(row, space-between, flex-start);
    &-item {
      text-align: center;
      display: flex;
      flex-direction: column;
      .grid-img {
        display: flex;
        align-items: center;
        justify-content: center;
        width: px2rem(90);
        background: linear-gradient(
          162deg,
          rgba(20, 119, 224, 1) 4%,
          rgba(0, 80, 165, 1) 98%
        );
        border-radius: 50%;
        @include colCenter(px2rem(90));
        line-height: px2rem(88);
        margin: 0 auto;
        & > img {
          width: px2rem(50);
          height: px2rem(50);
        }
      }
      & > p {
        font-size: px2rem(22);
        color: #7c7c7c;
        margin-top: px2rem(17);
        width: px2rem(115);
      }
    }
  }
  &-activity {
    &-title {
      margin: px2rem(67) 0 px2rem(42);
      width: 100%;
      @include flex();
      & > div {
        font-size: px2rem(32);
        font-weight: 500;
        color: rgba(0, 0, 0, 1);
      }
      & > a {
        font-size: px2rem(24);
        color: $mainColor;
      }
    }
    &-recommend {
      .img-list {
        display: flex;
        flex-direction: row;
        /* justify-content: space-evenly; */
        align-items: center;
        &-item {
          position: relative;
          width: 50%;
          height: px2rem(332);
          border-radius: px2rem(5);
          margin: 0 px2rem(10);
          background-color: #fff;
          box-shadow: 0 0 13px 0 rgba(18, 27, 83, 0.03);
          border-radius: 6px;
          & > img {
            height: px2rem(200);
            border-radius: 6px 6px 0 0;
          }
          & > .bg {
            width: 100%;
            object-fit: cover;
          }
          & > .fire-tag {
            position: absolute;
            top: 0;
            left: 0;
            width: px2rem(117);
            height: px2rem(30);
            z-index: 10;
          }
          & > .title {
            font-size: px2rem(28);
            font-weight: 800;
            text-align: center;
            color: #312d2d;
            z-index: 10;
            margin-top: 13px;
            @include ellipsisMultiline(3);
          }
        }
      }
      .txt-list {
        width: px2rem(670);
        margin: 0 auto;
        @include flex();
        flex-wrap: wrap;
        &-item {
          width: px2rem(200);
          color: #333333;
          font-size: px2rem(24);
          margin-top: px2rem(30);
        }
      }
    }
  }
  &-file {
    margin-top: px2rem(50);
    position: relative;
    & > .more-list {
      position: absolute;
      right: 0;
      top: px2rem(25);
      display: flex;
      z-index: 10;
      & > a {
        color: $mainColor !important;
        font-size: px2rem(24);
      }
    }
    .van-hairline--top-bottom {
      position: initial !important;
    }
    .van-tabs__wrap {
      width: px2rem(300) !important;
    }
    .van-tab {
      width: px2rem(130) !important;
    }
    &-item {
      display: flex;
      margin-top: px2rem(30);
      & > .geren-img {
        width: px2rem(173);
        height: px2rem(230);
        border-radius: px2rem(12);
        overflow: hidden;
      }
      & > .txt {
        margin-left: px2rem(20);
        width: px2rem(360);
        & > .tit {
          font-size: px2rem(28);
          color: #000000;
          font-weight: 400;
          margin-bottom: px2rem(15);
          margin-top: px2rem(10);
        }
        .van-ellipsis-pro {
          color: #999;
          margin-top: 9px;
        }
        & > .content {
          color: #848484;
          font-size: px2rem(24);
          line-height: 1.8;
        }
      }
    }
  }
  .companyItem {
    background-color: #fff;
    box-shadow: 0 0 13px 0 rgba(18, 27, 83, 0.03);
    border-radius: px2rem(10);
    padding: px2rem(20);
    margin: px2rem(30) 0;
    .companyTitle {
      font-size: px2rem(36);
      color: #09106d;
      line-height: px2rem(66);
    }
    .companyWork {
      color: #969799;
      font-size: px2rem(28);
      line-height: px2rem(48);
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      margin-top: px2rem(10);
    }
    .tag {
      line-height: px2rem(40);
      img {
        width: px2rem(64);
        height: px2rem(30);
      }
    }
  }
  &-more {
    height: px2rem(50);
    width: 100%;
  }
}
</style>
